<template>
  <div class="page">
    <nav-bar title="督办回复"></nav-bar>
    <div class="page-main" style="margin-top: 44px" v-if="superviseRecordData[superviseRecordData.length - 1]">
      <van-cell title="督办意见" title-class="van-cell__title_gray" :border="false" />
      <van-field
        readonly
        v-model="superviseRecordData[superviseRecordData.length - 1].visitRecord"
        rows="5"
        autosize
        type="textarea"
        :border="false"
        class="van-field__value--textarea-lightgray"
      />
      <van-cell
        title="答复天数"
        :value="superviseRecordData[superviseRecordData.length - 1].remark"
        title-class="van-cell__title_gray"
        value-class="van-cell__value_black"
      />
      <van-cell
        title="督办时间"
        :value="superviseRecordData[superviseRecordData.length - 1].visitTime"
        title-class="van-cell__title_gray"
        value-class="van-cell__value_black"
      />
      <van-cell
        title="剩余回复时长"
        :value="superviseData.surplusTime"
        title-class="van-cell__title_gray"
        value-class="van-cell__value_black"
      />
      <van-form validate-trigger="onSubmit" :show-error="false" :label-width="120" @submit="onSubmit">
        <van-field required label="回复内容" readonly :border="false" />
        <van-field
          v-model="formParams.visitRecord"
          rows="5"
          autosize
          type="textarea"
          maxlength="200"
          show-word-limit
          class="van-field__value--textarea"
          placeholder="请输入回复内容……"
          :border="false"
          :rules="rules.visitRecord"
        />
        <div style="margin: 60px 16px">
          <van-button block type="info" native-type="submit" :disabled="buttonDisabled">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Upload from '@/mixins/upload'
import Event from '@/api/event'
export default {
  mixins: [Upload],
  data() {
    return {
      superviseData: {},
      superviseRecordData: [],
      formParams: {
        eventCode: this.$route.query.eventCode,
        visitRecord: '',
        button: '2',
        recordType: '2'
      },
      rules: {
        visitRecord: [{ required: true, message: '请输入回复内容' }]
      },
      buttonDisabled: false
    }
  },
  created() {
    this.getSuperviseDetail()
  },
  methods: {
    getSuperviseDetail() {
      Event.Manage.superviseDetail({
        eventCode: this.$route.query.eventCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.superviseData = data
          const dataDetail = data.detail
          for (let i = 0; i < dataDetail.length; i++) {
            if (dataDetail[i].visitRecord === '事件督办') {
              this.superviseRecordData.push({
                visitRecord: dataDetail[i + 1].visitRecord,
                visitUser: dataDetail[i + 1].visitUser,
                visitTime: dataDetail[i + 1].visitTime,
                remark: dataDetail[i + 1].remark
              })
            }
          }
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    onSubmit() {
      this.buttonDisabled = true
      Event.Manage.superviseReply(this.formParams)
        .then(res => {
          this.buttonDisabled = false
          const { status } = res.data
          if (status === 0) {
            this.$router.push('/page/message?backTo=-2&title=提交成功')
          } else {
            this.$toast.fail(res.data.message)
          }
        })
        .catch(() => {
          this.buttonDisabled = false
        })
    }
  }
}
</script>
